<div class="layui-row layui-col-space10">
    {volist name="data_list" id="item"}
    <div class="layui-col-xs3 layui-col-md3 layui-col-lg2 material-img-item">
        <div class="appimg-info layui-row">
            <div class="layui-col-xs10">
                <span class="appimg-title text-ellipsis" title="{$item.title}">{$item.title}</span>
            </div>
            <div class="layui-col-xs2 text-right">
                <a href="javascript:;" data-id="{$item.id}" title="删除" class="del-btn"><i class="fa fa-trash-o"></i></a>
            </div>
        </div>
        <div class="img-item">
            <video style="width: 100%;height: 169px;" controls>
                <source src="{$item.server_url}"  type="video/mp4">
                <source src="{$item.server_url}"  type="video/ogg">
                您的浏览器不支持 HTML5 video 标签。
            </video>
        </div>
    </div>
    {/volist}
</div>
<script>

</script>
<style>
    .material-img-item {
        margin: 0 10px 30px 10px;
        cursor: pointer;
        position: relative;
        border: 1px solid #e7e7eb;
    }
    .material-img-item:hover{
        border: 2px solid #1E9FFF;
    }
    .material-img-item .appimg-info {
        font-size: 13px;
        line-height: 20px;
        padding: 6px 12px;
        border-bottom: 1px solid #e7e7eb;
    }
    .material-img-item .appimg-info .appimg-title {
        display: inline-block;
        width: 100%;
    }
    .material-img-item .img-item {
        position: relative;
        height: 169px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
</style>